import React, { Component } from 'react';
import { Button, Col, DatePicker, Form, Icon, Input, Row, Select, TreeSelect } from 'antd';
import moment from 'moment';

const SearchFormItem = props => {
  const { form, children, fieldName } = props;
  const { getFieldDecorator } = form;
  return getFieldDecorator(fieldName, {})(children);
};

const { Option } = Select;

@Form.create()
class SearchForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expand: false,
      value: undefined,
      // 年份数组
      years: [moment().year(), moment().year() - 1, moment().year() - 2],
      // 被选中的年份
      selectedYear: moment().year(),
      // 是否禁用city选择
      disableCitySelect: false,
    };
  }

  componentDidMount() {
    const { form } = this.props;
    form.setFieldsValue({
      uploadYear: this.state.selectedYear,
    });
  }

  setSelectedCity = cityId => {
    const { form } = this.props;
    form.setFieldsValue({
      cityCode: cityId,
    });
    this.setState({ disableCitySelect: true });
  };

  render() {
    const { form, cityList, districtAndStreetList } = this.props;
    const { selectedYear, years, value } = this.state;
    return (
      <div>
        <Row gutter={16}>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName={'cityCode'}>
              <Select
                disabled={this.state.disableCitySelect}
                allowClear
                placeholder={'请选择城市'}
                style={{ width: '100%' }}
                onChange={this.handleCityChange}
              >
                {cityList && cityList.length > 0
                  ? cityList.map((item, index) => {
                      return (
                        <Option key={index} value={item.id}>
                          {item.name}
                        </Option>
                      );
                    })
                  : null}
              </Select>
            </SearchFormItem>
          </Col>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName={'regionCode'}>
              <TreeSelect
                style={{ width: '100%' }}
                value={value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={districtAndStreetList}
                placeholder="请选择区县街道"
                allowClear
                onChange={this.selectedDistrictAndStreet}
              />
            </SearchFormItem>
          </Col>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName={'uploadYear'}>
              <Select
                style={{ width: '100%' }}
                onChange={this.handleYearChange}
                placeholder={'请选择筛查年度'}
              >
                {years.map((item, index) => {
                  return (
                    <Option value={item} key={index}>
                      {item}
                    </Option>
                  );
                })}
              </Select>
            </SearchFormItem>
          </Col>

          <Col className="gutter-row" span={6} style={{ textAlign: 'right' }}>
            <Button type="primary" style={{ marginLeft: 20 }} onClick={this.handleSearchClick}>
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              重置
            </Button>
          </Col>
        </Row>
      </div>
    );
  }

  /**
   * 查询按钮被点击
   */
  handleSearchClick = () => {
    const { form, onSearchClick } = this.props;
    const data = form.getFieldsValue();
    if (onSearchClick) {
      onSearchClick(data);
    }
  };

  /**
   * 用户选择了城市后保存城市的id
   * */
  handleCityChange = value => {
    let { form, onSelectedCity } = this.props;
    //清空选择
    form.resetFields('regionCode');
    if (onSelectedCity) {
      onSelectedCity(value);
    }
  };

  /**
   * 重置按钮被点击
   */
  handleReset = () => {
    const { form, onResetClick } = this.props;
    if (this.state.disableCitySelect) {
      form.resetFields(['regionCode', 'uploadYear']);
    } else {
      form.resetFields();
    }

    if (onResetClick) {
      onResetClick();
    }
  };

  /**
   * 用户不选择城市后，清空区域信息
   * */
  selectedDistrictAndStreet = () => {
    const { form } = this.props;
    form.resetFields('regionCode');
  };
}

export default SearchForm;
